<script>
export default {
  name: 'RenderFilter',
  render: function (h) {
    const min = this.minAndMax.min
    const max = this.minAndMax.max
    const length = this.length

    let slots = this.$slots.default || []
    slots = slots.filter(d => {
      const showIndex = d.data.attrs['show-index'] >= 0 ? d.data.attrs['show-index'] : Infinity
      return min <= showIndex && showIndex <= max
    })

    min > 0 && slots.unshift(
      h('tr', [
        h('td', {
          style: {
            height: min * 51 + 'px'
          }
        })
      ])
    )

    let button = length - max - 1
    button > 0 && slots.push(
      h('tr', [
        h('td', {
          style: {
            height: button * 51 + 'px'
          }
        })
      ])
    )
    return h(
      'tbody', {}, slots
    )
  },
  props: {
    minAndMax: {
      type: Object,
      default () {
        return {
          min: 0,
          max: 30
        }
      }
    },
    length: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {}
  },
  watch: {
  },
  methods: {
  }
}
</script>

<style scoped>

</style>
